<template>
	<view>
		<u-navbar :is-back="true" :border-bottom="false" height="46" title="设备详情" title-color="#333" :title-bold="true"
		 :title-size="36">
			<view class="navbar-right" slot="right" @click="onShareType(0)">
				<view class="message-box right-item">
					<u-icon name="zhuanfa" size="38" style="margin-right: 30rpx;"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="wap">
			<view class="device_details_img">
				<image :src="practice.img" mode="heightFix"></image>
			</view>
			<view class="device_details_text">
				<view class="device_details_title">
					<view class="device_details_top">
						{{practice.title}}
					</view>
					<view class="device_details_data">
						<text>品质保障</text><text>厂家直供</text>
					</view>
					<view class="device_details_price">
						{{practice.smjg || '暂无价格'}}
					</view>
				</view>
				<view class="device_details_ico" @click="phonego()">
					<u-icon name="phone" size="38" color="#fff"></u-icon>
				</view>
			</view>

		</view>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<view class="device_details_address">
			<u-icon name="map" color="#666" size="28" class="device_ico_text" style="margin-right: 20rpx;"></u-icon>郑州市中牟县白沙镇
			2.2km
		</view>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<view class="device_details_info">
			<view class="device_info_label">
				设备信息
			</view>
			<view class="device_info_text">
				<view class="device_info_top">
					<view class="device_info_left">
						<view>
							品牌： <text>{{practice.brandname}}</text>
						</view>
						<view>
							型号： <text>{{practice.sbxh}}</text>
						</view>
						<view>
							类别： <text>{{practice.colname}}</text>
						</view>
						<view>
							组别： <text>暂无组别</text>
						</view>
					</view>
					<view class="device_info_right">
						<view>
							设备型号： <text>{{practice.sbxh}}</text>
						</view>
						<view>
							出厂时间： <text>{{practice.ccdate||'暂无出厂时间'}}</text>
						</view>
						<view>
							设备数量： <text>{{practice.sbsl||'暂无设备数量'}}</text>
						</view>
						<view>
							工作时间： <text>{{practice.gzxss || '暂无工作小时数'}}</text>
						</view>
					</view>
				</view>
				<view class="device_info_bottom">
				<!-- 	<view>
						应用场景：<text>垃圾填埋</text>
					</view> -->
					<view>
						设备简介：<text>{{practice.sbyt}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<view class="device_details_info" style="padding-bottom: 114rpx;">
			<view class="device_info_label">
				租赁商信息
			</view>
			<view class="device_info_rent">

				<image :src="practice.comlogo" mode="widthFix"></image>

				<view class="device_rent_box">
					<view class="device_rent_top">
						<text>{{practice.comname}}</text><!-- <text>诚信度：</text> -->
					</view>
					<view class="device_rent_bootm">
						<text>成立时间：{{practice.comclrq}}</text>
					</view>
				</view>
			</view>
			<view class="device_rent_cont">
				{{practice.comdesc}}
			</view>
		</view>

		<view class="details-more_box">
			<view class="details_tab">
				<view class="details_tab_sc"  @click="GoCollection(3314,practice.id,practice.title,practice.headimg)">
					<u-icon name="star" size="40" :color="iconColor" style="margin-right: 15rpx"></u-icon>收藏
				</view>
				<view class="details_tab_xz" @click="phonego()">
					马上联系
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import ShareMerge from "@/common/ShareMerge.js"
	import Collection from "@/common/Collection.js"
	export default {
		mixins: [ShareMerge, Collection],
		data() {
			return {
				id: 0,
				practice: [],
				stype: "8",
				spageid: "3314",
				title:"",
				shareUrl: "",
				shareTitle: "",
				shareContent: "",
				shareImg: "",
				creatememid:"",
				img:"",
			}
		},
		async onLoad(options) {
			this.id = options.id
			await this.PraDetails(options.id)
			await this.Collection();
			if (this.$store.state.userIn) {
				this._creatememid = JSON.parse(this.$store.state.userIn).id
			}
		},
		methods: {
			async PraDetails(id) {
				let params = {
					ak: this.$store.state.token,
					cmd: 'nDevice_query_proc',
					para: {
						id: id, 
					}
				}
				const res = await this.$u.api.PraDetails(params)
				this.img=res.Data.img
				res.Data.img = this.baseUrl + res.Data.img
				this.practice = res.Data
				this.title=this.practice.title

				this.shareTitle=this.practice.title
				this.shareContent=this.practice.sbyt 
				this.shareImg=this.practice.img
			},
			phonego() {
				if(this.$store.state.token){
					uni.makePhoneCall({
						// 手机号
						phoneNumber: this.practice.lxdh,
						// 成功回调
						success: (res) => {
							console.log('调用成功!')
						},
						// 失败回调
						fail: (res) => {
							console.log('调用失败!')
						}
					});
				}else{
					this.$u.route('/pages/myuser/user/UserInfo')
				}
			
			}
		}

	}
</script>

<style scoped lang="scss">
	.wap {
		padding: 0 30rpx;

		.device_details_img {
			height: 460rpx;
			background: #F2F2F2;
			border-radius: 10px;
			text-align: center;
			padding: 14rpx 0;
			margin-bottom: 38rpx;

			image {
				height: 430rpx;
			}
		}

		.device_details_text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;

			.device_details_title {
				flex: 1;
			}

			.device_details_top {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.device_details_data {
				font-size: 24rpx;
				color: #999999;

				text {
					display: inline-block;
					padding: 5rpx;
					border: 2rpx solid #E0E0E0;
					border-radius: 5rpx;
					margin: 20rpx 0 28rpx 0;

					&:last-child {
						margin-left: 20rpx;
					}
				}
			}

			.device_details_price {
				font-size: 28rpx;
				font-weight: bold;
				color: #C40200;
			}
		}

		.device_details_ico {
			width: 66rpx;
			height: 66rpx;
			background: #C30D23;
			box-shadow: 0px 2rpx 10px 0px rgba(195, 13, 35, 0.39);
			border-radius: 50%;
			margin-right: 30rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}

	.device_details_address {
		padding: 30rpx;
		color: #333333;
		font-size: 28rpx;
	}

	.device_details_info {
		padding: 30rpx;

		.device_info_label {
			font-size: 32rpx;
			color: #000000;
			padding-bottom: 30rpx;
		}

		.device_info_text {
			.device_info_top {
				display: flex;

				.device_info_left,
				.device_info_right {
					flex: 1;
					font-size: 24rpx;
					color: #999999;

					view {
						margin-bottom: 15rpx;
					}

					text {
						color: #333333;
					}
				}
			}

			.device_info_bottom {
				font-size: 24rpx;
				color: #999999;

				view {
					margin-bottom: 15rpx;
				}

				text {
					color: #333333;
					line-height: 20px;
				}
			}
		}

	}

	.details-more_box {
		background-color: #fff;
		padding: 10rpx 30rpx;

		.details_more_text {
			padding: 40rpx 30rpx 0;
			font-size: 34rpx;
			font-weight: bold;
			color: #000000;
		}

		.details_tab {
			padding: 0rpx 30rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 104rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid #e5e5e5;

			.details_tab_sc {
				display: flex;
				font-size: 28rpx;
				color: #383838;
			}

			.details_tab_xz {
				padding: 20rpx 80rpx;
				background: #C40200;
				border-radius: 42rpx;
				color: #fff;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}

	.device_info_rent {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;

		image {
			margin-right: 24rpx;
			width: 75rpx;
			height: 75rpx;
		}

		.device_rent_box {
			.device_rent_top {
				margin-bottom: 16rpx;

				text {
					&:first-child {
						font-size: 28rpx;
						color: #333333;
						margin-right: 20rpx;
					}

					// &:last-child {
					// 	padding: 2rpx 10rpx;
					// 	background: #CECECE;
					// 	border-radius: 26rpx;
					// 	font-size: 24rpx;
					// 	color: #FFFFFF;
					// }
				}

			}

			.device_rent_bootm {
				text {
					font-size: 24rpx;
					color: #999999;

					&:first-child {
						margin-right: 55rpx;
					}
				}

			}
		}
	}

	.device_rent_cont {
		font-size: 24rpx;
		color: #666666;
		line-height: 20px;
	}
</style>
